<html>
  <head>
    <script src="three.js/build/Three.js"></script>
    <style type="text/css">
      body {
        margin: 0px;
        padding: 0px;
      }

      #container {
        position:absolute;
        left:0px;
        top:0px;
        width:100%;
        height:100%;
        margin: 0px;
        padding: 0px;
      }
    </style>

    <script src="raf.js"></script>

  </head>

  <body>
    <script>
      // <!--
      var renderer = new THREE.WebGLRenderer({antialias: true});
      renderer.setSize(document.body.clientWidth, document.body.clientHeight);
      document.body.appendChild(renderer.domElement);
      renderer.setClearColorHex(0xEEEEEE, 1.0);
      renderer.clear();
      renderer.shadowCameraFov = 50;
      renderer.shadowMapWidth = 1024;;
      renderer.shadowMapHeight = 1024;


      var fov = 45; // camera field-of-view in degrees
      var width = renderer.domElement.width;
      var height = renderer.domElement.height;
      var aspect = width / height; // view aspect ratio
      var near = 1; // near clip plane
      var far = 10000; // far clip plane
      var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
      camera.position.z = -400;
      camera.position.x = 200;
      camera.position.y = 350;
      var scene = new THREE.Scene();

      new THREE.ColladaLoader().load('models/monster.dae', function(collada) {
        var model = collada.scene;
        skin = collada.skins[0];
        model.scale.set(0.1, 0.1, 0.1);
        model.rotation.x = -Math.PI/2;
        model.castShadow = model.receiveShadow = true;
        scene.add(model);
      });


      var plane = new THREE.Mesh(
        new THREE.PlaneGeometry(400, 200, 10, 10), 
        new THREE.MeshLambertMaterial({color: 0xffffff}));
      plane.rotation.x = -Math.PI/2;
      plane.position.y = -25.1;
      plane.receiveShadow = true;
      scene.add(plane);

      var light = new THREE.SpotLight();
      light.castShadow = true;
      light.position.set( 170, 330, -160 );
      scene.add(light);

      renderer.shadowMapEnabled = true;


      renderer.render(scene, camera);
      var paused = false;
      var last = new Date().getTime();
      var down = false;
      var sx = 0, sy = 0;
      window.onmousedown = function (ev){
        down = true; sx = ev.clientX; sy = ev.clientY;
      };
      window.onmouseup = function(){ down = false; };
      var rotation = Math.PI/2;
      camera.position.x = Math.cos(rotation)*300;
      camera.position.z = Math.sin(rotation)*300;
      window.onmousemove = function(ev) {
        if (down) {
          var dx = ev.clientX - sx;
          var dy = ev.clientY - sy;
          rotation += dx * 0.01;
          camera.position.x = Math.cos(rotation)*300;
          camera.position.z = Math.sin(rotation)*300;
          camera.position.y += dy;
          sx += dx;
          sy += dy;
        }
      }
      var st = 0;
      var skin = null;
      function animate(t) {
        if (!paused) {
          last = t;
          if ( st > 30 ) st = 0;

          if ( skin ) {
            for ( var i = 0; i < skin.morphTargetInfluences.length; i++ ) {
              skin.morphTargetInfluences[ i ] = 0;
            }
            skin.morphTargetInfluences[ Math.floor( st ) ] = 1;
            st += 0.5;
          }
          camera.lookAt( scene.position );
          renderer.render(scene, camera);
        }
        window.requestAnimationFrame(animate, renderer.domElement);
      };
      animate(new Date().getTime());
      onmessage = function(ev) {
        paused = (ev.data == 'pause');
      };
      // -->
    </script>
  </body>

</html>
